<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 自定义组件直接写v-model即可 -->
        <my-input v-model="name"></my-input>
        <div>{{name}}</div>
    </div>
    <script src="../assets/vue2.js"></script>
    <script>
        Vue.component('my-input',
            {
                props: ['name'],
                methods: {
                    onInput(e) {
                        this.$emit('input', e.target.value);
                    }
                },
                template:
                    `<div>
                <input :value="name" @input="onInput" type="text" />
            </div>`
            }
        )
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    name: '小明'
                }
            },
        })
    </script>
</body>

</html>